<template>
    <div>
        <header-footer :commonData="{$parent:$parent,indexLogo:1}">
            <div class="newsCenter" v-cloak>
                <div class="crumb width1200">
                    <ul>
                        <li class="f_left">当前位置：</li>
                        <li class="f_left">
                            <router-link to="/index">首页></router-link>
                        </li>
                        <li class="f_left">新闻中心</li>
                    </ul>
                </div>
                <div class="news_content">
                    <div class="news_tabs f_left text_center">
                        <ul>
                            <li v-for="(tab,index) in tabs" :key="index" @click="tabClick(tab)">
                                <a :newsType="tab.newsType"
                                    :class="{news_tabs_a_active:tab.newsType==type}">{{tab.title}}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="news_tabs_content f_left">
                        <h3 class="text_center">{{title}}</h3>
                        <div class="news_tab_table_box">
                            <table class="news_tab_table" width="100%">
                                <tbody>


                                    <tr v-for="(item,index) in newsLst" :key="index">
                                        <td class="news_tab_table_tr1 text_left">

                                            <router-link class="color333" target="_blank"
                                                :to="String.Format('/news/news_info/{0}',item.id)" :title="item.title">
                                                {{item.title}}
                                            </router-link>
                                        </td>
                                        <td class="text_right">
                                            {{item.updateTime}}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page.sync="form.pageNo" :page-sizes="[5, 10, 15, 20]"
                            layout="total, sizes, prev, pager, next, jumper" :total="total">
                        </el-pagination>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
        </header-footer>
    </div>
</template>

<script>
    import headerFooter from '../../components/header_and_footer.vue'
    export default {
        name: 'news_center',
        data() {
            return {
                type: 1,
                tabs: [{
                        'title': '学习动态',
                        'newsType': 1,
                        'aHref': '/news/news_1'
                    },
                    {
                        'title': '培训通知',
                        'newsType': 2,
                        'aHref': '/news/news_2'
                    },
                    {
                        'title': '考试通知',
                        'newsType': 3,
                        'aHref': '/news/news_3'
                    },
                ],
                title: "",
                total: 100,
                newsLst: [],
                form: {
                    limit: 10,
                    pageNo: 1
                }
            }
        },
        created: function() {
            this.init();
        },
        methods: {
            init: function() {
                this.type = parseInt(this.$route.params.type);
                this.getNews();
            },
            getNews: function() {
                var that = this;
                this.common.post(this.api.getNewsList, {
                    newsType: this.type,
                    minId: this.form.pageNo,
                    pageSize: this.form.limit,
                }, function(res) {
                    that.total = parseInt(res.total);
                    that.newsLst = res.resultMap;
                });
            },
            tabClick: function(item) {
                this.title = item.title;
                this.type = item.newsType;
                this.getNews();
            },
            //分页当前页点击
            handleCurrentChange: function(val) {
                this.form.pageNo = val;
                this.getNews();
            },
            //分页选择
            handleSizeChange: function(val) {
                this.form.pageNo = 1;
                this.form.limit = val;
                this.getNews();
            },
        },
        components: {
            headerFooter
        },
        watch: {
            '$route': function(to, from) {
                this.init();
            }
        }
    }
</script>

<style>
    .news_tab_table_tr1 a {
        width: 100%;
    }
</style>
